<template>
  <el-table v-loading="loading" :header-cell-style="{color:'#000000'}" :data="list" border fit highlight-current-row :cell-style="{ padding: 0 }">
    <el-table-column label="课程名称" prop="course_name" width="150" />
    <el-table-column label="参评教师">
      <template slot-scope="{row}">
        <div
          v-for="(group_item, group_index) in row.evaluation_courses_groups"
          :key="group_item.id"
        >
          <div v-if="group_item.evaluation_course_teachers.length">
            <div class="flex_center_align">
              <div style="width: 100%">
                <div
                  v-for="(teacher, teacher_index) in group_item.evaluation_course_teachers"
                  :key="teacher_index"
                >
                  <div class="flex_center_align">
                    <div
                      style="line-height:28px;display: inline-block;width: 100%;padding: 10px;height: auto"
                      :style="{ 'border-top': teacher_index !== 0 ? '1px dashed #EBEEF5' : 'none' }"
                    >
                      <span style="width:25%;display: inline-block;"><strong style="color:#999999">工号：</strong>{{ teacher.teacher.employee_no }}</span>
                      <span style="width:22%;display: inline-block;"><strong style="color:#999999">姓名：</strong>{{ teacher.teacher.name }}</span>
                      <span style="width:21%;display: inline-block;"><strong style="color:#999999">电话：</strong>{{ teacher.teacher.mobile }}</span>
                      <span style="width:32%;display: inline-block;"><strong style="color:#999999">学校：</strong>{{ (teacher.teacher.is_external ? teacher.teacher.school_name : '本校') }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 1px" :style="group_index + 1 !== row.evaluation_courses_groups.length ? 'position: relative;width:calc(100% + 20px);left:-10px;border:none;border-top:solid 1px #EBEEF5' : 'position: relative;width:100%;left:0;border: none;'" />
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { $butRequest } from '@/sun-components/SunProcessButRequests.js'
import { $tooltips } from '@/sun-components/SunMsg.js'
export default {
  name: 'ProcessCommonAuditAuthorized',
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      loading: false
    }
  },
  computed: {
    show_authorized() {
      return this.$parent.$parent.show_authorized
    }
  },
  watch: {
    show_authorized: {
      handler: function(show) {
        if (show) {
          this.requestData()
        }
      }
    }
  },
  created() {
    if (this.show_authorized) {
      this.requestData()
    }
  },
  methods: {
    async requestData() {
      const _that = this
      const btn = this.$parent.$parent.set_advance_request
      if (btn.model === 'leader_audit') { // 确保接口的准确性
        _that.loading = true
        $butRequest(btn, { 'evaluation_course_ids': _that.$parent.$parent.evaluation_course_ids })
          .then((response) => {
            _that.list = response
            _that.loading = false
          }).catch(() => {
            _that.loading = false
          })
      } else {
        $tooltips('请求终止,流程错误!')
      }
    }
  }
}
</script>
